<template>
	<view class="container">
		<view class="header">
			<text class="title">发布旅游攻略</text>
		</view>
		
		<view class="form-container">
			<!-- 标题输入 -->
			<view class="form-item">
				<text class="form-label">标题</text>
				<input 
					class="title-input" 
					v-model="guideData.title" 
					placeholder="请输入攻略标题（2-30字）" 
					maxlength="30"
				/>
			</view>
			
			<!-- 分类选择 -->
			<view class="form-item">
				<text class="form-label">分类</text>
				<picker 
					@change="handleCategoryChange" 
					:value="categoryIndex" 
					:range="categories" 
					range-key="name"
				>
					<view class="picker-box">
						<text>{{categories[categoryIndex].name}}</text>
						<text class="picker-arrow">▼</text>
					</view>
				</picker>
			</view>
			
			<!-- 封面图上传 -->
			<view class="form-item">
				<text class="form-label">封面图</text>
				<view class="cover-uploader" @tap="chooseCoverImage" v-if="!guideData.coverImage">
					<text class="upload-icon">+</text>
					<text class="upload-text">上传封面图</text>
				</view>
				<view class="cover-preview" v-else>
					<image class="cover-image" :src="guideData.coverImage" mode="aspectFill"></image>
					<text class="remove-image" @tap.stop="removeCoverImage">×</text>
				</view>
			</view>
			
			<!-- 正文内容 -->
			<view class="form-item">
				<text class="form-label">正文内容</text>
				<textarea 
					class="content-textarea" 
					v-model="guideData.content" 
					placeholder="请输入攻略内容（10-5000字）" 
					maxlength="5000"
				></textarea>
			</view>
			
			<!-- 详情图片上传 -->
			<view class="form-item">
				<text class="form-label">详情图片（最多9张）</text>
				<view class="image-uploader-list">
					<view 
						class="image-item" 
						v-for="(item, index) in guideData.detailImages" 
						:key="index"
					>
						<image class="detail-image" :src="item" mode="aspectFill"></image>
						<text class="remove-image" @tap.stop="removeDetailImage(index)">×</text>
					</view>
					<view class="uploader-item" @tap="chooseDetailImages" v-if="guideData.detailImages.length < 9">
						<text class="upload-icon">+</text>
					</view>
				</view>
			</view>
			
			<!-- 地点信息 -->
			<view class="form-item">
				<text class="form-label">地点</text>
				<input 
					class="input" 
					v-model="guideData.location" 
					placeholder="请输入相关地点" 
				/>
			</view>
			
			<view class="form-tips">
				<text>温馨提示：图片和文字内容仅用于分享旅游体验，请勿发布违规内容，一经发现将被删除。</text>
			</view>
			
			<!-- 提交按钮 -->
			<button class="submit-btn" @tap="submitGuide">发布攻略</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categoryIndex: 0,
				categories: [
					{ id: 1, name: "全部攻略" },
					{ id: 2, name: "美食" },
					{ id: 3, name: "购物" },
					{ id: 4, name: "旅拍地点" },
					{ id: 5, name: "沙滩" },
					{ id: 6, name: "出片景点" }
				],
				guideData: {
					title: '',
					type: '全部攻略',
					coverImage: '',
					content: '',
					detailImages: [],
					location: ''
				}
			}
		},
		methods: {
			// 选择分类
			handleCategoryChange(e) {
				this.categoryIndex = e.detail.value;
				this.guideData.type = this.categories[this.categoryIndex].name;
			},
			
			// 选择封面图
			chooseCoverImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.guideData.coverImage = res.tempFilePaths[0];
					}
				});
			},
			
			// 删除封面图
			removeCoverImage() {
				this.guideData.coverImage = '';
			},
			
			// 选择详情图片
			chooseDetailImages() {
				const remainCount = 9 - this.guideData.detailImages.length;
				if (remainCount <= 0) return;
				
				uni.chooseImage({
					count: remainCount,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.guideData.detailImages = [...this.guideData.detailImages, ...res.tempFilePaths];
					}
				});
			},
			
			// 删除详情图片
			removeDetailImage(index) {
				this.guideData.detailImages.splice(index, 1);
			},
			
			// 提交攻略
			submitGuide() {
				// 表单验证
				if (!this.guideData.title.trim()) {
					this.showToast('请输入攻略标题');
					return;
				}
				
				if (this.guideData.title.trim().length < 2) {
					this.showToast('标题至少2个字');
					return;
				}
				
				if (!this.guideData.coverImage) {
					this.showToast('请上传封面图');
					return;
				}
				
				if (!this.guideData.content.trim()) {
					this.showToast('请输入攻略内容');
					return;
				}
				
				if (this.guideData.content.trim().length < 10) {
					this.showToast('内容至少10个字');
					return;
				}
				
				// 显示加载中
				uni.showLoading({
					title: '正在发布...'
				});
				
				// 上传图片（示例逻辑）
				setTimeout(() => {
					// 在实际应用中，这里应该是上传图片到服务器，然后发送表单数据
					
					// 模拟上传完成
					uni.hideLoading();
					
					uni.showModal({
						title: '发布成功',
						content: '您的攻略已成功发布，感谢您的分享！',
						showCancel: false,
						success: () => {
							// 返回上一页
							uni.navigateBack();
						}
					});
				}, 1500);
			},
			
			// 显示提示
			showToast(message) {
				uni.showToast({
					title: message,
					icon: 'none'
				});
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 40rpx;
	}
	
	.header {
		background-color: #ffffff;
		padding: 30rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #eeeeee;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.form-container {
		padding: 30rpx;
	}
	
	.form-item {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}
	
	.form-label {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
	}
	
	.title-input {
		width: 100%;
		height: 80rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
	}
	
	.input {
		width: 100%;
		height: 80rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
	}
	
	.picker-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
	}
	
	.picker-arrow {
		font-size: 24rpx;
		color: #999;
	}
	
	.cover-uploader {
		width: 100%;
		height: 300rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.upload-icon {
		font-size: 60rpx;
		color: #999;
		margin-bottom: 10rpx;
	}
	
	.upload-text {
		font-size: 28rpx;
		color: #999;
	}
	
	.cover-preview {
		position: relative;
		width: 100%;
		height: 300rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}
	
	.cover-image {
		width: 100%;
		height: 100%;
	}
	
	.remove-image {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		width: 50rpx;
		height: 50rpx;
		border-radius: 25rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
	}
	
	.content-textarea {
		width: 100%;
		height: 300rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		padding: 20rpx;
		font-size: 28rpx;
	}
	
	.image-uploader-list {
		display: flex;
		flex-wrap: wrap;
	}
	
	.image-item, .uploader-item {
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
	}
	
	.detail-image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}
	
	.uploader-item {
		background-color: #f5f5f5;
		border-radius: 8rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 60rpx;
		color: #999;
	}
	
	.form-tips {
		font-size: 24rpx;
		color: #999;
		padding: 0 30rpx;
		margin-bottom: 40rpx;
	}
	
	.submit-btn {
		width: 90%;
		height: 90rpx;
		background-color: #1296db;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 45rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
	}
</style> 